﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>毕业</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper-bundle.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery.base64.js"></script>

<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
body{
	font-family:"microsoft yahei";
}
.swiper {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
	background:#fff;
}  
.swiper-slide{
}
.swiper-slide{
	width:100%;
	height:100%;
	background:url(upload/bg.jpg) no-repeat left top;
	background-size:100% 100%;
}
img{
	display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array{
	position:absolute;z-index:999;-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
.content {
    width: 60%;
    height: auto;
    word-wrap:break-word;
    word-break:break-all;
    overflow: hidden;
    margin-left: 30px;
}
</style>
</head>

<body>
<div class="swiper">
  <div class="swiper-wrapper">
  <section class="swiper-slide">
    <div class="ani resize" style="width:120px;left:100%;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
      <div class="txt" style="word-wrap:break-word;height: 100%;">
      <div class = "content"style="color:#b60927; display:inline-block; font-size:20%; line-height:1; margin-right:10px; ">
        <button onclick="login()" style="height: 100%;width: 100%">进入</button>
      </div>
      <br>
      </div>
      
      </div>
  </section>  
    <!-------------slide1----------------->
        <section class="swiper-slide">
          <div class="ani resize" style="width:120px;left:10px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div id ="slide1" class = "content"style="color:#b60927; display:inline-block; font-size:20%; line-height:1; margin-right:10px;height = 30px ">
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              操<br>
              场</div>
            </div>
        </section>
     <!---------------slide2-------------->   
     <section class="swiper-slide">

      <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
        <div class="txt" style="word-wrap:break-word;height: 100%;">
        <div class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
          我们在这里相遇，你第一次知道了“弘毅、明德、笃学、创新”
          清风拂渭水，明月满长安。四年的故事从这里开始。
        </div>
        <br>
        </div>
        
        </div>
        <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
        <div class="txt">
          开<br>学<br>典<br>礼
        </div>
        </div>
    </section>
     <!----------------slide3-------------->
     <section class="swiper-slide">

      <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
        <div class="txt" style="word-wrap:break-word;height: 100%;">
        <div class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
          “一、二、三、四，一二三四！”骄阳似火，你们排着整齐的队列，每一个正步踢得响亮，绿色的迷彩服遮不住你们燃烧的激情。
        </div>
        <br>
        </div>
        
        </div>
        <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
        <div class="txt">
          军<br>训
          </div>
        </div>
    </section>
        <!-------------slide4----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div id="slide4" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
            </div>
            <br>
            </div>
            
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              荣<br>誉<br>获<br>奖
            </div>
            </div>
        </section>
        <!-------------slide5----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div id="slide5" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              
            </div>
            <br>
            </div>
            
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              奖<br>助<br>学<br>金  
            </div>
            </div>
        </section>
        <!-------------slide6----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div id="slide6_1" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              
            </div>
            <br>
            <div id="slide6_2" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
            </div>
            <br>
            <div id="slide6_3" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              餐<br>厅 
            </div>
            </div>
        </section>
        <!-------------slide7----------------->
        <section class="swiper-slide">
          <div class="ani resize" style="width:120px;left:20px;top:30px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div id="slide7_1" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              
            </div>
            <br>
            <div id="slide7_3" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
            </div>
            <br>
            <div id="slide7_2" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              教<br>学<br>楼
            </div>
            </div>
        </section>
        <!-------------slide8----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div id="slide8_1" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              
            </div>
            <br>
            <div id="slide8_2" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              你的累计借书X次，超过了X%的同学
            </div>
            <br>
            <div id="slide8_3" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
             
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              图<br>书<br>馆
            </div>
            </div>
        </section>
        <!-------------slide9----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div id="slide9" class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              宿<br>舍<br>楼
            </div>
            </div>
        </section>
        <!-------------slide10----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              2021年4月17日，你陪伴长安大学度过了他70岁的生日。看着来参加典礼的优秀校友，你暗暗承诺，将来也要成为长安大学的骄傲。
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              校<br>庆
            </div>
            </div>
        </section>
        <!-------------slide11----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              我们共经历了X轮核酸检测，X天的封闭管理。迷迷糊糊起床参加凌晨四点的核酸检测。我们一定都会记得那段艰辛难忘的日子。
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              核<br>酸<br>检<br>测
            </div>
            </div>
        </section>
        <!-------------slide12----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">
              2022年6月，你再一次站在了操场上。这次，你坚定而又自信。带着所有人的祝福，你完成了你大学的最后一课——毕业典礼。校长的寄语还在耳边回荡，转眼，我们已经要奔向远方。
            </div>
            <br>
            </div>
            </div>
            <div class="ani resize" style="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"  > 
            <div class="txt">
              毕<br>业<br>典<br>礼
            </div>
            </div>
        </section> 
        <!-------------slide13----------------->
        <section class="swiper-slide">

          <div class="ani resize" style="width:120px;left:20px;top:184px;z-index:3;right: 70px;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s"  >
            <div class="txt" style="word-wrap:break-word;height: 100%;">
            <div class = "content"style="color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px; ">
              轻装策马青云路，人生从此驭长风。青春浩气走千山，我们跃入人海，各显锋芒。明所从来，知向何处。愿你前途光明，无问西东。
            </div>
            <br>
            </div>
            </div>
        </section>  
    </div>
    
   <img src="images/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> 
  <div class="swiper-pagination"></div>  
</div>


<script>
scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 

          }
var scales = document.querySelectorAll('.txt');
for (var i=0; i<scales.length; i++) {
	ss=scales[i].style;
	ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
}

		  
  var mySwiper = new Swiper ('.swiper', {
    direction : 'vertical',
    pagination: {
	   el:'.swiper-pagination',
    },
    mousewheel: true,
    on:{
	  init: function(){
        swiperAnimateCache(this);
        swiperAnimate(this);
 	  },
      slideChangeTransitionEnd: function(){
  	    swiperAnimate(this);
      }
    }
  })
  

  //定义信息
  var CQCT, FYCSJ, HDXF, JSCS, JSPM, QJCS, SBJY, WCMS, XBKC, XBKCCJ, name
  var prize = []
  var scholarship = []

  
  //发送数据  
var ID = prompt('请输入信息门户账号')
var pwd = prompt('请输入密码')
function setText(id, text)
{
  document.getElementById(id).innerText=text
}
function login(){
    var params = {
        "secretKey": "e1xydGYxXGFuc2lcZGVmZjB7XGNvbG9ydGJsO1xyZWQ5XGdyZWVuOVxibHVlOTtccmVkMjU1XGdy",
        "portalID": this.ID,
        "password": this.pwd
        // "portalID": "1234567890",
        // "password": "1234567890"
    }
    var params64 = $.base64.encode(JSON.stringify(params));
    $.ajax({
        type: "POST",
        url: "https://yiban.chd.edu.cn/portrait/main",
        async: false,
        data: {
            key : params64
        },
        success: function(data) { //data封装的xhr.responseText
            console.log(data)
            let d = data.data
            // 接收返回的数据
            this.CQCT = d.CQCT
            this.FYCSJ = d.FYCSJ
            this.JSCS = d.JSCS
            this.WCMS = d.WCMS
            this.XBKC = d.XBKC
            this.XBKCCJ = d.XBKCCJ
            this.name = d.name
            this.prize = d.prize
            this.scholarship = d.scholarship
            setText("slide1",this.name+", 还记得吗？2018年的九月，你历经拼搏来到了长安大学，为了欢迎你，我们在操场举办了开学典礼。" )
            // document.getElementById("slide1").innerText=this.name+", 还记得吗？2018年的九月，你历经拼搏来到了长安大学，为了欢迎你，我们在操场举办了开学典礼。";
            var prizeSet = '四年中，你乐于尝试，珍惜每一个机会。你曾在'
            for(let i=0;i<d.prize.length;i++)
            {
              prizeSet+=d.prize[i].event_name+"获得"+d.prize[i].level+d.prize[i].grade+", "
              console.log(prizeSet)
            }
            document.getElementById("slide4").innerText=prizeSet
            var scholarshipSet = '你追求上进，刻苦努力，自律是你的座右铭。你值得在'
            for(let i=0;i<d.scholarship.length;i++)
            {
             scholarshipSet+=d.scholarship[i].year+'时获得'+d.scholarship[i].award_name+', '
             console.log(scholarshipSet)
            }
            document.getElementById("slide5").innerText=scholarshipSet+'奖/助学金'
            document.getElementById("slide6_1").innerText='干饭人永远在路上。在长安大学你最常去'+d.CQCT+'用餐。天行健餐厅的鱼粉、树慧园餐厅的锅仔肥牛、小时空的蜜雪冰城、滋兰苑餐厅的小火锅，你最pick哪一个？'
            document.getElementById("slide6_2").innerText='你很少在'+d.FYCSJ+'时间段用餐'
            if(d.FYCSJ=='17:00-20:00')
            {
            document.getElementById("slide6_3").innerText='忙碌了一天，一顿简单健康的晚餐是对自己的奖励，千万不要为了保持身材而放弃享受晚餐哦。'
            }
            else if(d.FYCSJ=='7:00-9:00')
            {
              document.getElementById("slide6_3").innerText='记得以后早起20分钟，在早八前悠闲地享用早餐，为自己注入一天的活力。'
            }
            else
            {
              document.getElementById("slide6_3").innerText='外卖虽然好吃，但经常吃影响身体健康哦。餐厅里简单的家常小菜或许更适合你的胃。'
            }
            setText("slide7_1", "通宵自习室灯火通明，还记得难住你的是哪位名人的理论概念，还是草稿纸上不断重复的公式方程。那些你独自承受的寂寞时光，最终都成为你的底气。还记得吗？你的第一门专业课程"+d.XBKC+"取得了"+d.XBKCCJ+"分。")
            setText("slide7_2", "四年时间，你完成了"+d.WCMS+"门课程，获得"+d.HDXF+"学分，求知好学永远是青春不变的主题。")
            if(parseInt(d.XBKCCJ)<=60)
            {
              setText("slide7_3", "那些没有打败你的，终将会使你更强大。")
            }
            else if(parseInt(d.XBKCCJ)>60&&parseInt(d.XBKCCJ)<=85)
            {
              setText("slide7_3", "你的辛勤付出终会得到回报，每一次成绩长大都会替你记录。")
            }
            else if(parseInt(d.XBKCCJ)>85)
            {
              setText("slide7_3", "那些让你困惑许久的问题，现在已经成为你成绩单上漂亮的分数")
            }
            setText("slide8_1", "亲爱的逸夫图书馆，犹如一位博学的长者，静静的等待迷惑的你来这里寻求答案。你在那里借阅的第一本书是"+d.SBJY+"，当时在繁多的书目中选择它一定有你的原因。")
            setText("slide8_2", "你的累计借书"+d.JSCS+"次，超过了"+d.JSPM+"的同学")
            if(parseInt(d.JSCS)<=10)
            {
              setText("slide8_3", "可能你不常来图书馆借阅，希望你以后能够在图书馆留下属于自己的故事。")
            }
            else if(parseInt(d.JSCS)>10&&parseInt(d.JSCS)<=30)
            {
              setText("slide8_3", "你有自己独特的喜好，在这里积累的文字塑造了独一无二的你。")
            }
            else if(parseInt(d.JSCS)>30)
            {
              setText("slide8_3", "四年中你把握时间，读过万卷书后，相信你有独特的感悟。")
            }
            setText("slide9", "四年来，你一共请假外出"+d.QJCS+"次，你去了哪里？那里承载了你什么样的回忆。是钟楼的车水马龙，还是渭河边的悠悠日落，每一次的外出，都有人记挂你的归来。")
            
        },
        error: function(xhr) {
            console.log(xhr.status)
        }
    });
}


  </script>
</body>
</html>
